<template>
  <div class="orders">
    <h2>饿了吗</h2>
    <ul>
      <li
        @click="chekebox = index"
        :class="{ active: chekebox == index }"
        v-for="(item, index) in orders"
        :key="index"
      >
        {{ item.name }}
      </li>
    </ul>
    <main v-for="(item, index) in list" :key="index">
      <div class="tetli">
        <h1>{{ item.name }}</h1>
        <span>已送达</span>
      </div>
      <div class="img">
        <img src="" alt="" />
        <div class="price">
          <div>￥{{ item.price }}</div>
          <div>共{{ item.num }}件</div>
        </div>
      </div>
      <button>再来一单</button>
    </main>
  </div>
</template>

<script setup>
import { reactive, ref ,onBeforeMount} from "vue";
     let chekebox=ref(0)
     let orders=ref([
        { id: 1, name: "全部" },
        { id: 2, name: "待消费" },
        { id: 3, name: "待评价" },
        { id: 4, name: "退款" },
      ])
     let list=ref([
        { name: "纯手工饺子（凤城九路店）", price: 17.8, num: 2, url: [1, 2] },
        { name: "唐久便利店（海荣名城店", price: 18.3, num: 3, url: [1, 2, 3] },
        { name: "唐久便利店（海荣名城店", price: 18.3, num: 3, url: [1, 2, 3] },
        { name: "美益水果（北美店）", price: 28.89, num: 2, url: [1, 2] },
      ])
</script>

<style lang="css" scoped>
.orders {
  background-color: rgb(229, 226, 226);
  box-sizing: border-box;
}
.orders h2 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.orders ul {
  height: 30px;
  display: flex;
  list-style: none;
}
.orders ul li {
  margin: 10px 10px;
}
.orders ul li.active {
  font-weight: 700;
  font-size: 20px;
}
.orders main {
  width: 92%;
  height: 200px;
  border-radius: 10px;
  background-color: white;
  margin: 10px 0;
  margin-left: 15px;
}
.orders main .tetli {
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
}
.orders main .tetli h1 {
  font-weight: 700;
  font-size: 24px;
}
.orders main .tetli span {
  font-size: 14px;
  color: rgb(197, 193, 193);
  margin-right: 10px;
}
.orders main .img {
  height: 80px;
  display: flex;
  justify-content: space-between;
}
.orders main .img .price {
  padding: 10px;
}
.orders main .img .price div:nth-child(1) {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}
.orders main .img .price div:nth-child(2) {
  font-size: 14px;
  color: rgb(197, 193, 193);
}
.orders main .img img {
  height: 100%;
  width: 80px;
  background-color: red;
}
.orders main button {
  width: 100px;
  height: 30px;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
  background-color: white;
  color: rgb(40, 207, 162);
  border: 1px solid rgb(40, 207, 162);
  float: right;
  margin-top: 20px;
  margin-right: 10px;
}
</style>